<template>
  <div class="w-full h-screen flex flex-col">
    <div class="flex flex-row items-center mb-4 px-5 w-full justify-between">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        shape="round"
        class="flex-auto"
        show-action
        autofocus
        @update:model-value="onUpdateModelValue"
        @focus="onFocus"
      >
        <template #action>
          <div @click="onClickCancel">取消</div>
        </template>
      </van-search>
    </div>
    <div
      class="flex-auto overflow-auto bg-red-30 flex flex-col justify-between"
      v-if="attendList.length > 0"
    >
      <div class="overflow-y-auto">
        <attendInfoCell
          v-for="(item, index) in attendList"
          :key="index"
          :item="item"
          :attendType="'inner'"
          @onChange="checkStatusOnChange"
        />
      </div>
      <bottomView
        v-if="attendList.length > 0"
        v-model:checked="checkAll"
        @change="onStatusChange"
        @onConfirm="onConfirm"
      />
    </div>

    <emptyView v-else des="请尝试更换关键词" />
  </div>
</template>

<script setup>
import { computed, ref, defineEmits, defineProps } from "vue";
import { useOrderVisitStore } from "@/store";
import { useRouter } from "vue-router";
import searchAttend from "./searchAttend.vue";
import debounce from "@/utils/debounce";
import bottomView from "./components/bottomView.vue";
import attendInfoCell from "./components/attendInfoCell.vue";
import emptyView from "@/components/emptyView.vue";
import { searchRecommendAPI } from "@/services/orderVisit";
import { mapState } from "pinia";

const store = useOrderVisitStore();
const router = useRouter();
const emits = defineEmits(["onCancel", "onConfirm"]);

const value = ref("");
const attendList = ref([]);
const checkAll = ref(false);

function onClickCancel() {
  emits("onCancel");
}

function onClickItem(item) {
  item.checked = !item.checked;
  if (!item.checked) {
    checkAll.value = false;
  }
}

async function onUpdateModelValue(v) {
  console.log("onUpdateModelValue:", v);
  if (v.length === 0) {
    // 查找猜你想找
    let data = await searchRecommendAPI();
    let recommendList = data.datas || [];

    recommendList = recommendList.map((v) => mapItem(v));
    recommendList.forEach((element) => {
      element.checked = false;
    });
    handleRecommendList(recommendList);
    return;
  }
  debounce(async () => {
    let list = await store.searchInnerAttendAction(v);
    attendList.value = list.map((v) => mapItem(v));
  });
}

function mapItem(v) {
  return {
    name: v.name,
    ssoUserId: v.ssoUserId,
    partnerId: v.partnerId,
    formData: v.formData,
    position: v.position,
    deptFullName: v.deptFullName,
    participantType: v.participantType,
  };
}

async function onFocus() {
  if (value.value.length === 0) {
    // 查找猜你想找
    attendList.value = store.cacheRecommendedList || [];
    let data = await searchRecommendAPI();
    let recommendList = data.datas || [];
    handleRecommendList(recommendList);
    return;
  }
}

function handleRecommendList(recommendList) {
  attendList.value = recommendList.map((v) => mapItem(v));
  store.cacheRecommendedList = attendList.value;
}

function onStatusChange(checked) {
  attendList.value.map((v) => (v.checked = checked));
}

function onConfirm() {
  let arr = attendList.value.filter((v) => v.checked == true);
  console.log("onConfirm:", arr);
  emits("onConfirm", arr);
}

function checkStatusOnChange(v) {
  if (!v) {
    checkAll.value = false;
  }
}
</script>

<style lang="less" scoped>
.my-list {
  flex: 1;
}
</style>
